<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园历史文化数字地图</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- 自定义样式 -->
    <style>
        :root {
            --primary-color: #0d6efd;
            --secondary-color: #0b5ed7;
            --dark-color: #343a40;
            --light-bg: #f8f9fa;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: var(--light-bg);
        }

        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/static/media/老图书馆.webp');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 0;
            text-align: center;
        }

        .card {
            transition: transform 0.3s;
            height: 100%;
            border: none;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.12);
        }

        .card-img-top {
            height: 200px;
            object-fit: cover;
        }

        .footer {
            background-color: var(--dark-color);
            color: white;
            padding: 40px 0;
            margin-top: 50px;
        }

        .feature-icon {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border: none;
            border-radius: 30px;
            padding: 10px 25px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
        }

        .navbar {
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            background-color: white !important;
        }

        .navbar-brand {
            font-weight: 700;
            color: var(--primary-color) !important;
        }

        .nav-link {
            font-weight: 500;
            color: var(--dark-color) !important;
            margin: 0 8px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .nav-link:hover, .nav-link.active {
            background-color: rgba(13, 110, 253, 0.1);
            color: var(--primary-color) !important;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .hero-section {
                padding: 60px 0;
            }

            .hero-section h1 {
                font-size: 2rem;
            }

            .feature-icon {
                font-size: 2.5rem;
            }

            .card-img-top {
                height: 160px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <i class="bi bi-map-fill me-2"></i> 
                <span>校园历史文化数字地图</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/" aria-current="page">
                            <i class="bi bi-house-door me-1"></i>首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/explore">
                            <i class="bi bi-compass me-1"></i>探索
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about">
                            <i class="bi bi-info-circle me-1"></i>关于我们
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin">
                            <i class="bi bi-shield-lock me-1"></i>管理入口
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="hero-section">
        <div class="container">
            <h1 class="display-4 fw-bold">探索校园历史文化</h1>
            <p class="lead">通过数字地图体验校园丰富的历史文化遗产</p>
            <a href="/explore" class="btn btn-primary btn-lg mt-3">开始探索</a>
        </div>
    </div>

    <!-- 功能特色 -->
    <div class="container my-5">
        <h2 class="text-center mb-4">平台特色</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body text-center p-4">
                        <i class="bi bi-geo-alt feature-icon mb-3"></i>
                        <h5 class="card-title">历史地标</h5>
                        <p class="card-text">探索校园内具有历史意义的建筑和地点，了解它们背后的故事和文化价值。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body text-center p-4">
                        <i class="bi bi-signpost-2 feature-icon mb-3"></i>
                        <h5 class="card-title">文化路线</h5>
                        <p class="card-text">按照精心设计的路线游览校园，体验不同主题的文化之旅。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body text-center p-4">
                        <i class="bi bi-phone feature-icon mb-3"></i>
                        <h5 class="card-title">移动体验</h5>
                        <p class="card-text">支持移动设备访问，随时随地了解校园历史文化，获取位置导航服务。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 热门地点 -->
    <div class="container my-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">热门地点</h2>
            <a href="/explore" class="btn btn-sm btn-outline-primary">查看全部</a>
        </div>
        <div class="row g-4" id="hotspots-container">
            <!-- 热门地点将通过JavaScript动态加载 -->
            <div class="col-12 text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-md-6 mb-4 mb-md-0">
                    <h5 class="mb-3">校园历史文化数字地图</h5>
                    <p>致力于记录和传播校园历史文化，让更多人了解和珍视这些宝贵的文化遗产。</p>
                    <div class="mt-3">
                        <a href="#" class="text-white me-3"><i class="bi bi-facebook fs-5"></i></a>
                        <a href="#" class="text-white me-3"><i class="bi bi-twitter fs-5"></i></a>
                        <a href="#" class="text-white me-3"><i class="bi bi-instagram fs-5"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-github fs-5"></i></a>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 mb-4 mb-md-0">
                    <h5 class="mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="/" class="text-white text-decoration-none">首页</a></li>
                        <li class="mb-2"><a href="/explore" class="text-white text-decoration-none">探索</a></li>
                        <li class="mb-2"><a href="/about" class="text-white text-decoration-none">关于我们</a></li>
                        <li><a href="/admin" class="text-white text-decoration-none">管理入口</a></li>
                    </ul>
                </div>
                <div class="col-lg-5 col-md-12">
                    <h5 class="mb-3">联系我们</h5>
                    <p class="d-flex align-items-center mb-2">
                        <i class="bi bi-envelope-fill me-3"></i>
                        <span>3332732443@qq.com</span>
                    </p>
                    <p class="d-flex align-items-center">
                        <i class="bi bi-telephone-fill me-3"></i>
                        <span>18271112105</span>
                    </p>
                </div>
            </div>
            <hr class="my-4" style="background-color: rgba(255,255,255,0.1);">
            <div class="text-center">
                <p class="mb-0">&copy; 2025 校园历史文化数字地图. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 自定义JavaScript -->
    <script>
        // 页面加载完成后获取热门地点数据
        document.addEventListener('DOMContentLoaded', function() {
            fetch('/api/hotspots')
                .then(response => {
                    // 检查响应状态
                    if (!response.ok) {
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // 确保data是数组
                    if (!Array.isArray(data)) {
                        console.error('API返回的数据不是数组格式:', data);
                        throw new Error('API返回的数据格式不正确');
                    }
                    
                    // 清空加载中的spinner
                    const container = document.getElementById('hotspots-container');
                    container.innerHTML = '';
                    
                    // 渲染热门地点
                    data.forEach(hotspot => {
                        // 根据屏幕尺寸设置不同的列宽
                        const col = document.createElement('div');

                        // 检测屏幕宽度
                        if (window.innerWidth >= 992) {
                            col.className = 'col-lg-4 col-md-6'; // 大屏幕每行3个
                        } else if (window.innerWidth >= 768) {
                            col.className = 'col-md-6'; // 中等屏幕每行2个
                        } else {
                            col.className = 'col-12'; // 小屏幕每行1个
                        }
                        
                        const card = document.createElement('div');
                        card.className = 'card h-100';
                        
                        // 添加图片
                        if (hotspot.media) {
                            const img = document.createElement('img');
                            img.className = 'card-img-top';
                            img.src = hotspot.media;
                            img.alt = hotspot.name;
                            card.appendChild(img);
                        }
                        
                        // 添加卡片内容
                        const cardBody = document.createElement('div');
                        cardBody.className = 'card-body';
                        
                        const title = document.createElement('h5');
                        title.className = 'card-title';
                        title.textContent = hotspot.name;
                        
                        const text = document.createElement('p');
                        text.className = 'card-text';
                        text.textContent = hotspot.summary || hotspot.details || '暂无描述';
                        
                        cardBody.appendChild(title);
                        cardBody.appendChild(text);
                        card.appendChild(cardBody);
                        col.appendChild(card);
                        container.appendChild(col);
                    });
                })
                .catch(error => {
                    console.error('获取热门地点数据失败:', error);
                    const container = document.getElementById('hotspots-container');
                    container.innerHTML = '<div class="col-12 text-center"><p class="text-danger">加载热门地点失败，请稍后再试</p></div>';
                });
        });
    </script>
</body>
</html>

